<template>
    <v-layout class="rounded rounded-md flex-wrap">
        <NavBar></NavBar>
        <RouterView />
    </v-layout>
    <div id="alert">
        <v-fade-transition>
            <v-alert
                v-if="Box.alert_content.is_show"
                :type="Box.alert_content.type"
                :title="Box.alert_content.title"
                :text="Box.alert_content.text"
            ></v-alert>
        </v-fade-transition>
    </div>
</template>
<script setup>
import NavBar from './components/NavBar.vue'
import { useBoxStore } from './stores/box'
const Box = useBoxStore()
</script>
<style>
#alert {
    z-index: 10000000;
    position: fixed;
    top: 5%;
    left: 50%;
    transform: translate(-50%, 0);
    min-width: 300px;
}
</style>
